<template>
	<div class="aid">
		<div class="base">
			<p class="fixed-top">
				{{ importText.name }}
				<a-icon @click="closeFunction" type="close" />
			</p>
			<div class="main">
				<a-form :form="form">
					<a-form-item label="类型" v-show="$route.query.ClubID">
						<a-radio-group v-decorator="['Type', { rules: [{ required: true, message: '请输选择类型' }],initialValue:1 }]" name="radioGroup">
							<a-radio v-for="(item, i) in ActivityMemberTypeList" :key="i" :value="item.Key">{{ item.Value }}
							（{{item.Key==1?ScoreDetail.JoinScore:item.Key==2?ScoreDetail.WorkerScore:item.Key==3?ScoreDetail.AudienceScore:''}}分）
							</a-radio>
						</a-radio-group>
					</a-form-item>
					<a-form-item label="学号">
						<a-textarea
							placeholder="请输入学号，多个学号之间请换行"
							:autosize="{ minRows: 10, maxRows: 20 }"
							v-decorator="['userNo', { rules: [{ required: true, message: '请输入学号' }] }]"
						/>
						当前正在录入第{{ form.getFieldValue('userNo') ? form.getFieldValue('userNo').split('\n').length : 0 }}条数据
					</a-form-item>
					<a-form-item label="导入结果" v-if="importIf">
						<div class="flex">
							<a-col :span="12" style="margin-right:5px;">
								成功列表，共{{ importData.filter(m => m.IsSuccess).length }}条
								<div style="height:170px;overflow:hidden scroll;">
									<a-list class="followListArea" size="small" bordered :data-source="importData.filter(m => m.IsSuccess)">
										<a-list-item slot="renderItem" slot-scope="item, index" style="display: flex;">
											<div style="width: 120px">{{ item.UserNo }} :</div>
											<div style="flex: 1;text-align: left;">{{ item.Msg }}</div>
										</a-list-item>
									</a-list>
								</div>
							</a-col>
							<a-col :span="12">
								失败列表，共{{ importData.filter(m => !m.IsSuccess).length }}条
								<div style="height:170px;overflow:hidden scroll;">
									<a-list class="followListArea" size="small" bordered :data-source="importData.filter(m => !m.IsSuccess)">
										<a-list-item slot="renderItem" slot-scope="item, index" style="display: flex;">
											<div style="width: 120px">{{ item.UserNo }} :</div>
											<div style="flex: 1;text-align: left;">{{ item.Msg }}</div>
										</a-list-item>
									</a-list>
								</div>
							</a-col>
						</div>
					</a-form-item>
					<a-form-item class="fixed-bottom">
						<a-button type="primary" @click="handleSubmit" :loading="loading">完成</a-button>
						<a-button style="margin-left: 10px;" @click="closeFunction">取消</a-button>
					</a-form-item>
				</a-form>
			</div>
		</div>
	</div>
</template>

<script>
import {
	DoGetActivityMemberTypeListCommon,
	UserActivityMemberDoImportFormText,
	ManageActivityMemberDoImportFormText,
	DoAddActivityMember,
	GetActivityTypePrizeListCommon,
	UserDoAddActivityMemberPrize,
	AddActivityMemberPrize
} from '@/api/follow';
import Cache from '@/utils/cache';
export default {
	props: {
		importText: Object
	},
	watch: {
		importText: function(importText) {
			if (importText.name == '成员导入-管理员' || importText.name == '成员导入-用户') {
				this.getOtherList();
			}
			if (importText.name == '奖项导入-管理员' || importText.name == '奖项导入-用户') {
				this.getPrizeList();
			}
		}
	},
	data() {
		return {
			ScoreDetail:{},
			importIf: false,
			importData: [],
			fileList: [],
			loading: false,
			formLayout: 'horizontal',
			form: this.$form.createForm(this, {
				name: 'coordinated'
			}),
			ActivityMemberTypeList: [],
			ActivityTypePrizeList: [],
			requestUrl: this.global.requestUrl,
			loadUrl: this.global.loadUrl,
			token: Cache.get('token')
		};
	},
	async created() {},
	methods: {
		async getPrizeList() {
			let res = await GetActivityTypePrizeListCommon({ activityTypeID: this.$route.query.TypeID });
			this.ActivityTypePrizeList = res.data.data;
		},
		async getOtherList() {
			let res = await DoGetActivityMemberTypeListCommon({ activityID: this.$route.query.ID });
			console.log(res.data.data);
			this.ScoreDetail=res.data.Score;
			this.ActivityMemberTypeList = res.data.data;
		},
		fileload() {
			window.open(this.loadUrl + this.importText.href, '_blank');
		},
		uploadChange(info) {
			let { fileList } = info;
			const status = info.file.status;
			if (status === 'done') {
				if (info.file.response.code == 0) {
					this.$message.success(info.file.response.msg);
					this.fileList = [...fileList]; //重点
					// setTimeout((res)=>{
					// 	this.fileList = []
					// },500)
				} else {
					this.$message.error(info.file.response.msg);
					this.fileList = this.fileList.splice(this.fileList.length - 1, 1);
				}
			}
			this.fileList = [...fileList]; //重点
		},
		// uploadChange(info) {
		// 	console.log(info)
		// 	if (info.file.status !== 'uploading') {
		// 	        console.log(info.file, info.fileList);
		// 	      }
		// 	      if (info.file.status === 'done') {
		// 	        this.$message.success(`${info.file.name} file uploaded successfully`);
		// 	      } else if (info.file.status === 'error') {
		// 	        this.$message.error(`${info.file.name} file upload failed.`);
		// 	      }
		// },
		closeFunction(data) {
			this.importIf = false;
			this.form.resetFields();
			this.$emit('closeFun', 1);
		},
		handleRemove(file) {
			const index = this.fileList.indexOf(file);
			const newFileList = this.fileList.slice();
			newFileList.splice(index, 1);
			this.fileList = newFileList;
		},
		beforeUpload(file) {
			console.log(file);
			this.fileList = [...this.fileList, file];
			return false;
		},
		handleSubmit(e) {
			this.form.validateFields(async (err, values) => {
				if (!err) {
					let that = this;
					let data = {};
					let res;
					data.activityID = this.$route.query.ID;
					data.content = values.userNo.trim();
					if(!data.content){
						this.$message.error('学号不能为空！')
						return false
					}
					this.loading = true
					data.type = values.Type;
					data.splitChar = '\n';
					res = this.importText.name == '成员导入-用户'?await UserActivityMemberDoImportFormText(data):await ManageActivityMemberDoImportFormText(data);
					this.importData = res.data.data;
					this.form.resetFields();
					this.$message[res.data.code == 0 ? 'success' : 'error'](res.data.msg);
					this.importIf = res.data.code == 0 ? true : false;
					this.loading = false
					// if(this.importText.name=='奖项导入-管理员' || this.importText.name=='奖项导入-用户'){
					// 	data.ActivityTypePrizeID = values.ActivityTypePrizeID
					// }
					// let successNum = 0;
					// let errorList = [];
					// for (let i = 0, len = list.length; i < len; i++) {
					// 	console.log(i);
					// 	let no = list[i].replace(/,/g, '');

					// 	if(this.importText.name=='成员导入-管理员'){
					// 		data.UserNo = no.replace(/^\s*|\s*$/g, '');
					// 		res = await DoAddActivityMember(data);
					// 	}
					// 	if(this.importText.name=='成员导入-用户'){
					// 		data.UserNo = no.replace(/^\s*|\s*$/g, '');
					// 		res = await UserActivityMemberDoImportFormText(data);
					// 	}
					// 	if(this.importText.name=='奖项导入-管理员'){
					// 		data.ActivityMemberID = no.replace(/^\s*|\s*$/g, '');
					// 		res = await DoAddActivityMember(data);
					// 	}
					// 	if(this.importText.name=='奖项导入-用户'){
					// 		data.ActivityMemberID = no.replace(/^\s*|\s*$/g, '');
					// 		res = await UserDoAddActivityMemberPrize(data);
					// 	}
					// 	if (res.data.code == 0) {
					// 		successNum++;
					// 		this.percent = parseInt((successNum / list.length) * 100);
					// 	} else {
					// 		errorList.push(data.UserNo);
					// 	}
					// }
					// const h = this.$createElement;
					// this.$info({
					// 	title: '导入结果',
					// 	content: h('div', {}, [
					// 		h('p', `成功导入了${successNum}条数据`),
					// 		h('p', errorList.length > 0 ? `失败了${errorList.length}条数据，失败的学号为${errorList.join(',')}` : '')
					// 	]),
					// 	onOk() {
					// 		that.percent = 0;
					// 		that.closeFunction(1);
					// 	}
					// });
				}
			});
		}
	}
};
</script>

<style lang="less" scoped>
	.aid .base{
		width:1000px;
		margin-left:-500px;
	}
/deep/.ant-form {
	margin-top: 50px;
	padding-bottom: 50px;
}
/deep/.ant-form-item {
	margin: 20px 50px;
	display: flex;
}
/deep/.ant-form-item-label {
	width: 100px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-align: right;
}
/deep/.ant-form-item-control-wrapper {
	flex: 1;
}
/deep/.ant-calendar-picker {
	width: 100% !important;
}
</style>
